<template>
    <div>
        <h3 style="text-align: center;">新闻详情</h3>
        <div>新闻 ID: {{ newsInfo.id }}</div>
        <div>新闻标题: {{ newsInfo.title }}</div>
        <div>新闻内容: {{ newsInfo.content }}</div>
    </div>
</template>
<script>
export default {
    name: 'NewsDetail',
    data() {
        return {
            newsId: 0,
            newsInfo: {}
        }
    },
    mounted() {
        this.getNewsInfo();
    },
    beforeRouteEnter(to, from, next) {
        console.log('NewsDetail beforeRouteEnter')
        next() // 必须调用 next，否则无法进入组件
    },
    beforeRouteLeave(to, from, next) {
        console.log('NewsDetail beforeRouteLeave')
        next() // 必须调用 next，否则无法离开组件
    },
    beforeRouteUpdate(to, from, next) {
        console.log('NewsDetail beforeRouteUpdate')
        next();
        // 在路由更新后，再次查询请求新数据
        this.getNewsInfo();
    },
    methods: {
        getNewsInfo() {
            // 获取新闻详情
            this.newsId = this.$route.params.id;
            // 模拟请求
            this.newsInfo = {
                id: this.newsId,
                title: '新闻标题-' + this.newsId,
                content: '新闻内容-' + this.newsId
            }
        }
    },

}
</script>
<style></style>